<template>
    <div class="search">
        <my-header>
      <div class="header-box">
        <router-link to="/home">
          <div class="jiantou"></div>
        </router-link>
        <span>关于'{{value}}'搜索结果</span>
      </div>
    </my-header>
    <div class="task-list">
            <ul>
              <li
                v-for="(item,index) in valueArr"
                :key="item.task_id"
                :id="item.task_id"
                :data_num="item.num"
                :data_price="item.price"
                :class='`option-${index}`'
                @click="choose(index)"
              >
                <div class="left">
                  <div class="image">
                    <img :src="`${item.imgUrl}`" alt />
                  </div>
                </div>
                <div class="right">
                  <div class="right-header">
                    <p>
                      {{item.title}}
                      <span>+{{item.price}}</span>
                    </p>
                  </div>
                  <div class="right-bottom">
                    <span class="type">{{item.classify}}</span>
                    <span class="num">剩余{{item.num}}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
    </div>
</template>
<script>
import MyHeader from "../components/MyHeader.vue";
import { baseURL } from "../http/require.js";
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
 
export default {
    components:{MyHeader},
    data() {
      return {
        value:'',
        valueArr:[],
        imgUrl:''
      }
    },
    mounted() {
      this.value = this.$route.query.value

    },
    methods: {
      init() {
        const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "加载中..."
      });
      this.valueArr = this.$route.query.valueArr
      if(this.valueArr.length > 0) {
        setTimeout(() => {
        Toast.clear()
          
        }, 100);
      }
        this.valueArr.map(item => {
            // console.log(item);
            switch (item.classify) {
              case "下载专区":
                this.imgUrl = `${baseURL}/static/image/download.png`;
                item["imgUrl"] = this.imgUrl;
                break;
              case "点赞专区":
                this.imgUrl = `${baseURL}/static/image/like.png`;
                item["imgUrl"] = this.imgUrl;
                break;
              case "砍价专区":
                this.imgUrl = `${baseURL}/static/image/kanjia.png`;
                item["imgUrl"] = this.imgUrl;
                break;
            }
            // return item
          });
      },
choose(index) {
      const selection = document.querySelector(`.option-${index}`);
      let taskId = selection.getAttribute("id");
      let price = selection.getAttribute("data_price");
      let num = selection.getAttribute("data_num");
      this.$store.dispatch("task/setTaskIdAsync", taskId);
      this.$store.dispatch("task/setPriceAsync", price);
      this.$store.dispatch("task/setNumAsync", num);
      this.$router.push("/taskDetail");
    }
    },
    created() {
      this.init()
    }
    
}
</script>
<style lang="scss" scoped>
@import '../css/reset.css';
.search {
    width: 100%;
    .header-box {
    width: 100%;
    display: flex;
    align-items: center;
    .jiantou {
      flex-grow: 1;
      width: 15px;
      height: 15px;
      border-left: 3px solid #fff;
      border-top: 3px solid #fff;
      transform: rotate(320deg);
      margin-left: 15px;
    }
    span {
      flex-grow: 1;
    }
  }
  .task-list {
      width: 100%;
      ul {
        width: 100%;
        background-color: #fff;
        li {
          width: 100%;
          height: 80px;
          display: flex;
          justify-content: center;
          border-bottom: 1px solid #ccc;
          margin-bottom: 10px;
          .left {
            flex-grow: 0.3;
            height: 100%;
            display: flex;
            align-items: center;
            .image {
              width: 65px;
              height: 65px;
              line-height: 65px;
              margin: 0 auto;
            }
            img {
              width: 100%;
              height: 100%;
              vertical-align: middle;
            }
          }
          .right {
            flex-grow: 2;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            line-height: 200%;
            p {
              font-size: 18px;
              position: relative;
              span {
                position: absolute;
                right: 10px;
                color: red;
                font-weight: 600;
              }
            }
            .type,
            .num {
              font-size: 12px;
              background-color: #ccc;
              padding: 3px 3px;
              margin-right: 10px;
            }
          }
        }
      }
    }
}
</style>